<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato);
			body {
			  display: flex;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			  background: #111;
			}
			
			.glowing-list {
			  padding: 0;
			  list-style-type: none;
			  box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.189), 0 1.7px 3.5px rgba(0, 0, 0, 0.268), 0 3.5px 7.1px rgba(0, 0, 0, 0.335), 0 7.3px 14.6px rgba(0, 0, 0, 0.415), 0 20px 40px rgba(0, 0, 0, 0.6);
			}
			.glowing-list .glowing-list__item {
			  position: relative;
			  padding: 15px;
			  font-size: 2em;
			  font-family: Lato, sans-serif;
			  color: white;
			  text-decoration: none;
			  cursor: pointer;
			  transition: 0.5s;
			}
			.glowing-list .glowing-list__item::before, .glowing-list .glowing-list__item::after {
			  position: absolute;
			  content: "";
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  background: #3498db;
			  transform: scaleY(0);
			  transform-origin: bottom;
			  transition: transform 0.5s;
			}
			.glowing-list .glowing-list__item::before {
			  z-index: -1;
			}
			.glowing-list .glowing-list__item::after {
			  z-index: -2;
			  filter: blur(40px);
			}
			.glowing-list .glowing-list__item:hover {
			  color: #111;
			}
			.glowing-list .glowing-list__item:hover::before, .glowing-list .glowing-list__item:hover::after {
			  transform: scaleY(1);
			  transform-origin: top;
			}
		</style>
	</head>
	<body>
		<ul class="glowing-list">
		  <li class="glowing-list__item">CSS animation is awesome</li>
		  <li class="glowing-list__item">SVG animation is awesome</li>
		  <li class="glowing-list__item">Web animation is awesome</li>
		  <li class="glowing-list__item">Canvas animation is awesome</li>
		  <li class="glowing-list__item">WebGL animation is awesome</li>
		</ul>

	</body>
</html>
